<template>
	<view class="aaa">
		<!-- 标题 -->
		<view class="biao">
			<u-tabs :list="list2"></u-tabs>
		</view>

		<!-- 购物车 -->
		<view class="abcde" v-if="goodslist.length>0">
			
				<u-swipe-action v-for="(item,idx) in goodslist" :key="item.id">
					<u-swipe-action-item :options="options1" @click='del(item.id)'>
						<view class="swipe-action u-border-top u-border-bottom">
							<view class="swipe-action__content">
								<view class="">
									<view class="gou">
										<u-checkbox-group @change="checkone(item)">
											<u-checkbox :checked="item.checkedd" shape="square"></u-checkbox>
										</u-checkbox-group>
										<view class="">
											<image class="img" :src="barUrl+item.img"></image>
										</view>
										<view class="title">
											<view>{{item.goodsname}}</view>
											<view>比加入降低￥100</view>
											<view><text>￥{{item.price}}</text>
											</view>
											<view class="btn">
												<button @click="jian(item.id,idx)">-</button>
												<view class="">{{item.num}}</view>
												<button @click="jia(item.id,idx)">+</button>
											</view>

										</view>
									</view>
								</view>
							</view>
						</view>
					</u-swipe-action-item>
				</u-swipe-action>
		
		</view>
		<view class="" v-else>
			<u-empty mode="car" icon="http://cdn.uviewui.com/uview/empty/car.png">
			</u-empty>

		</view>
		<!-- 底部 -->
		<!-- #ifdef  H5 -->
		<view class="tab">
			<u-checkbox-group @change="checkAll">
				<u-checkbox :checked="Allcatrt" shape="square"></u-checkbox>
			</u-checkbox-group>
			<view class="">
				合计:￥{{allprice}}
			</view>
			<view class="Allprice" @click="indent">
				去结算
			</view>
		</view>
		<!-- #endif -->
		<!-- #ifdef  MP-WEIXIN -->
		<view class="tab cee">
			<u-checkbox-group @change="checkAll">
				<u-checkbox :checked="Allcatrt" shape="square"></u-checkbox>
			</u-checkbox-group>
			<view class="">
				合计:￥{{allprice}}
			</view>
			<view class="Allprice" @click="indent">
				去结算
			</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		Cartlist,
		Cartdelete,
		Cartedit
		
	} from '@/request/app.js'
	export default {
		data() {
			return {
				list2: [{

					name: '全部(20)',

				}, {

					name: '降价(4)',

				}, {

					name: '常买(2)',

				}, {

					name: '分类',
				}],
				goodslist: [],
				Allcatrt: false,
				barUrl: this.$imgUrl,
				options1: [{
					text: '删除',
					style: {
						backgroundColor: "#ff6347"
					}
				}],

			}
		},
		onLoad() {
			Cartlist({
					uid: uni.getStorageSync('userinfo').uid,
				})
				.then(res => {
					console.log(res, "购物车列表")
					if (res.data.code == 200) {
						this.goodslist = res.data.list
						// 通过循环遍历给数组添加属性
						this.goodslist.map((item) => {
							this.$set(item, "checkedd", false);
						});
						console.log(this.goodslist, "添加属性");
					}
				})

		},
		computed: {
			// 计算
			allprice() {
				console.log(this.goodslist, "1222");
				let sum = 0;
				this.goodslist.map(item => {
					if (item.checkedd) {
						sum += item.num * item.price
					}
				})
				console.log("12");
				return sum.toFixed(2)
				console.log(sum, "222");
			}
		},
		methods: {
			// 封装一个加数量按钮
			jia(e, a) {
				console.log(this.goodslist[a].num, "加");
				this.goodslist[a].num++
				Cartedit({
						id: e,
						type: 2,
					})
					.then(res => {
						console.log(res, "添加");

					})
			},
			// 封装一个减少按钮
			jian(e, a) {
				console.log(this.goodslist[a].num, "减");
				this.goodslist[a].num--
				if (this.goodslist[a].num < 1) {
					this.goodslist[a].num = 1
				}
				Cartedit({
						id: e,
						type: 1,
					})
					.then(res => {
						console.log(res, "减少");


					})
			},
			// 封装一个删除按钮
			del(id) {
				// console.log(id, "删除");
				this.goodslist.splice(id, 1)
				Cartdelete({
					id
				}).then(res => {
					console.log(res, "删除成功");
				})
				Cartlist({
						uid: uni.getStorageSync('userinfo').uid,
					})
					.then(res => {
						console.log(res, "购物车列表")
						if (res.data.code == 200) {
							this.goodslist = res.data.list ? res.data.list : []
							// 通过循环遍历给数组添加属性
							this.goodslist.map((item) => {
								this.$set(item, "checkedd", false);
							});
							console.log(this.goodslist, "添加属性");
						}
					})
			},
			// 封装一个全选
			checkAll() {
				// console.log(this.Allcatrt, "事件");
				this.Allcatrt = !this.Allcatrt
				// console.log(this.Allcatrt);
				this.goodslist.map(item => {
					item.checkedd = this.Allcatrt
					console.log(this.Allcatrt);
				})

			},
			// // 单选
			checkone(item) {
				item.checkedd = !item.checkedd
				// console.log(item.checked);
				this.Allcatrt = this.goodslist.every(item => item.checkedd)

			},
			// 结算按钮
			indent() {
				// 判断结算的时候至少选择一件商品,如果没有选择提示选择
				if (this.goodslist.some(item => item.checkedd)) {
					// 如果选中一件获取用户的数量
					let num = 0
					// 获取用户的id
					let val = ''
					// 获取用户所选的购物列表
					let arr = []
					this.goodslist.map(item => {
							if (item.checkedd) {
								num += item.num
								val += `,${item.id}`
								arr.push(item)
							}
							// 定义一个对象去接收
							let obj = {
								countmoney: this.allprice,
								countnumber: num,
								idstr: val.slice(1),
							}
							// 把获取的订单对象推送本地
							uni.setStorageSync("order", JSON.stringify(obj))
							// 把选择的购物车列表数组加入存储中
							uni.setStorageSync("arr", JSON.stringify(arr))
						}),
						uni.navigateTo({
							url: '../indent/indent'
						})

				} else {
					uni.showToast({
						title: '至少选择一件商品',
						icon: 'error'
					})

				}

			},
		}


	}
</script>

<style>
	.abcde {
		height: 80vh;
	}

	.bbb {
		overflow: scroll;
	}

	.btn button {
		width: 40px;
		height: 20px;
		line-height: 15px;
		text-align: center;
	}

	.btn {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}



	.Allprice {
		width: 130px;
		height: 50px;
		background-color: tomato;
		border-radius: 10px;
		color: white;
		text-align: center;
		line-height: 50px;
	}


	.tab {
		width: 100%;
		height: 60px;
		background-color: white;
		box-shadow: 0 0 10px 10px white;
		border: 1px solid wheat;
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: fixed;
		bottom: 50px;
		z-index: 100;
	}

	.cee {
		position: fixed;
		bottom: 0
	}

	.an .text {
		margin: 10px;
	}

	.title {
		width: 150px;
	}

	.title view:nth-child(1) {
		font-size: 16px;
		overflow: hidden; //超出部分隐藏
		text-overflow: ellipsis; //超出部分显示...
		white-space: nowrap; //文本强制一行显示    
	}



	.title view:nth-child(2) {
		font-size: 15px;
		color: red;
	}

	.title view:nth-child(3) {
		font-size: 16px;
		color: red;
	}

	.title view:nth-child(4) text:nth-child(2) {
		font-size: 14px;
		text-decoration: line-through;
		color: gray;
	}

	.gou {
		width: 100%;
		border: 1px solid wheat;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: white;
		margin: 10px auto;
	}

	.biao {
		width: 100%;
		display: flex;
		justify-content: space-evenly;
		margin-bottom: 10px;
	}

	.biao1 {
		width: 100%;
	}

	.img {
		width: 120px;
		height: 120px;
	}
</style>
